import React, { Component } from "react";
import Table from "../../components/table/table";
import { Input, Col, Row } from "antd";

const queryUrl = "/manage/queryUser";
const tableColumns = [
  {
    title: "姓名",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "年龄",
    dataIndex: "age",
    key: "age",
  },
  {
    title: "位置",
    dataIndex: "address",
    key: "address",
  },
];
export default class user extends Component {
  state = {
    name: "",
    age: "",
  };

  searchReset = () => {
    this.setState({
      name: "",
      age: "",
    });
  };
  inputChange = ({ target }: { target: any }, type: string) => {
    this.setState({
      ...this.state,
      [type]: target.value,
    });
  };
  searchContent = () => {
    return (
      <Row gutter={16}>
        <Col span={6}>
          <Input
            placeholder="请输入姓名"
            value={this.state.name}
            onChange={(e) => this.inputChange(e, "name")}
          />
        </Col>
        <Col span={6}>
          <Input
            placeholder="请输入年龄"
            value={this.state.age}
            onChange={(e) => this.inputChange(e, "age")}
          />
        </Col>
      </Row>
    );
  };
  render() {
    return (
      <div>
        <Table
          queryUrl={queryUrl}
          tableColumns={tableColumns}
          searchContent={this.searchContent()}
          searchParams={this.state}
          searchReset={this.searchReset}
        ></Table>
      </div>
    );
  }
}
